<template>
  <div class="goodsinfo">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-if="flag" ref="ball"></div>
    </transition>

    <!-- 轮播图 -->
    <div class="mui-card">
      <swiper :lunbotuList="lunbotuList"></swiper>
    </div>
    <!-- 商品信息 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsInfo.title}}</div>
      <div class="mui-card-footer">
        <div class="mui-card-content-inner">
          <div class="price">
            <div class="oldPrice">
              市场价：
              <del>￥{{goodsInfo.oldPrice}}</del>
            </div>
            <div class="newPrice">
              销售价：
              <span>￥{{goodsInfo.newPrice}}</span>
            </div>
          </div>
          <div class="num">
            数量：
            <numbox @getCount="count" :max="goodsInfo.lave"></numbox>
          </div>
          <mt-button type="primary">立即购买</mt-button>
          <mt-button type="danger" @click="addCart">加入购物车</mt-button>
        </div>
      </div>
    </div>
    <!-- 商品具体参数信息 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{goodsInfo.goods_no}}</p>
          <p>库存情况：{{goodsInfo.lave}}</p>
          <p>上架时间：{{goodsInfo.time | dataFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="des">图文介绍</mt-button>
        <br />
        <mt-button type="danger" size="large" plain @click="cmt">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.ball {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
  top: 368px;
  left: 135px;
}
.goodsinfo {
  background: #eee;
}
.num {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.mui-card-footer {
  display: block;
}
.price {
  display: flex;
  .newPrice {
    margin-left: 10px;
    span {
      color: crimson;
    }
  }
}
</style>
<script>
import swiper from "../subcomponents/swiper.vue";
import numbox from "../subcomponents/numbox.vue";
export default {
  data() {
    return {
      lunbotuList: [],
      goodsInfo: [],
      id: this.$route.params.id,
      flag: false,
      totalCount: 1
    };
  },
  created() {
    this.getLunbo(); //请求轮播图
    this.getInfo();
  },
  methods: {
    //请求轮播图方法
    getLunbo() {
      this.$http.get("lunbotu").then(res => {
        this.lunbotuList = res.body;
      });
    },
    //商品详情
    getInfo() {
      this.$http.get("goodsInfo/" + this.$route.params.id).then(res => {
        this.goodsInfo = res.body;
      });
    },
    //跳转到图文详情
    des() {
      this.$router.push("/home/goodsDes/" + this.id);
    },
    cmt() {
      this.$router.push("/home/goodsCmt/" + this.id);
    },
    addCart() {
      this.flag = !this.flag;
      //创建添加购物车商品的详细信息
      var goodsinfo = {
        id: this.id,
        price: this.goodsInfo.newPrice,
        count: this.totalCount,
        selSatus: true
      };
      this.$store.commit("addToCar", goodsinfo);
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;
      var ballPosition = this.$refs.ball.getBoundingClientRect();
      var badgePosition = document
        .querySelector("#badge")
        .getBoundingClientRect();
      var x = badgePosition.left - ballPosition.left;
      var y = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all .5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter() {
      this.flag = !this.flag;
    },
    count(num) {
      this.totalCount = num;
      console.log("接收到数据了");
    }
  },
  components: {
    swiper,
    numbox
  }
};
</script>